<template>
  <!-- ===== header start ===== -->
  <div class="header" :class="{ active: !isIndex }">
    <div class="header-warp w-1160 flex flex-between text-center">
      <div class="head-logo">
        <h1>
          <span class="visib-hid">橙券</span>
          <a href="#">
            <!-- logo-norm.png -->
            <img
              :src="isIndex ? home : other"
              width="92"
              height="36"
              alt="logo"
            />
          </a>
        </h1>
      </div>
      <div class="head-nav">
        <ul class="flex flex-between">
          <li
            :key="item.name"
            v-for="item in navList"
            :class="{ up: item.children && item.children.length }"
          >
            <router-link :to="item.url" :class="{ headerColor: !isIndex }">{{
              item.name
            }}</router-link>
            <div v-if="item.children && item.children.length">
              <ul class="pull-down">
                <li v-for="son in item.children" :key="son.name">
                  <a href="#" class="subnav">{{ son.name }}</a>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'cq-header',
  data() {
    return {
      home: require('@/assets/img/logo-rev.png'),
      other: require('@/assets/img/logo标准.png'),
      navList: [
        {
          url: '/home',
          name: '首页'
        },
        {
          url: '#',
          name: '橙品牌',
          children: [
            {
              url: '#',
              name: '橙权益'
            },
            {
              url: '#',
              name: '橙金融'
            }
          ]
        },
        {
          url: '/news',
          name: '新闻动态'
        },
        {
          url: '/case',
          name: '行业案例'
        },
        {
          url: '/about',
          name: '关于我们'
        },
        {
          url: '/join',
          name: '加入我们'
        }
      ]
    }
  },
  props: {
    isIndex: {
      type: Boolean,
      default: false
    }
  },
  created() {
    this.get()
  },
  methods: {
    get() {
      console.log(this.isIndex)
    }
  }
}
</script>

<style lang="scss" scoped>
.head-nav li a:hover,
.head-nav li:nth-of-type(2):hover a:after {
  color: #ff7200;
}
.head-nav li:nth-of-type(2) ul {
  background-color: #fff;
}

.headerColor {
  color: #333;
}
.active {
  background-color: #fff;
}
</style>
